
<include file="mobile/Public/header" />

<link rel="stylesheet" href="__CSS__/good.css">
<link rel="stylesheet" href="__CSS__/makeorder.css">
<style>
	.star-section{padding: 1.5rem}
	.star-section img{ padding: 0.3rem;width: 1.6667rem}
	.quickorder-section{padding:0 0.834rem}
	.quickorder-section label{margin: 5px 0;display: inline-block}
	.quickorder-section .demand{width: 100%;border-radius: 3px;height: 7rem;resize: none;border:none;padding: 0.7rem;font-size: 1.4rem;}
	.quickorder-section .count{height: 3rem;border-radius: 3px;resize: none;border:none;font-size: 1.4rem;}
	.quickorder-section .unit{padding: 5px;background: grey}
	.quickorder-section .connection{border: none;height: 3rem;font-size: 1.4rem}
	.pic-content{padding:0.834rem}
	.pic-content section{ height: 0;width: 22%;position: relative;padding:0 0 22%;float: left;margin-right: 4%;margin-bottom: 1rem;background: white}
	.pic-content section:nth-child(4n){margin-right: 0}
	.pic-content section>.square-div{ position: absolute;height: 100%;width: 100%}
	.square-div>img{width: 100%;height: 100%;border: thin solid #dadada}
	.icon-img{padding:1.5rem}
	.padding-top{padding-top: 1rem}
	.padding-bottom{padding-bottom:1.2rem}
	ul{
		width: 98%;
		margin: 0 auto;
	}
	ul li{
		display: inline-block;
		width: 30%;
		margin: 2px;
		text-align: center;
		border: 1px solid #ccc;
		line-height: 3rem;
		border-radius: 5px;
	}
	.type-selected{
		background: #d6d6d6;
		color: white;
	}
</style>
<header class="color-main vertical-box">
	<span class="header-title">一键找布</span>
	<div class="header-left vertical-box">
		<img class="img-btn" src="__IMG__/back.png" onclick="history.back()">
	</div>
	<div class="header-right vertical-box">
		<img class="img-btn" src="__IMG__/home.png" onclick="window.location.href='{:U('shop/index/index')}'">
	</div>
</header>
<article class="">
	<article class="quick_order">
		<section class="typeid select margin-top margin-bottom">
			<ul>
				<li class="type-selected" data-type="1">找面料</li>
				<li data-type="2">找辅料</li>
				<li data-type="3">找加工/服务</li>
			</ul>
		</section>

		<section class="pic-content linear-section margin-bottom clearfix">
			<section id="uploadBtn" class="upload-btn icon-section">
				<div class="square-div">
					<img class="icon-img border-box" src="__IMG__/add.png">
				</div>
			</section>
			<script id="pic-tpl" type="text/x-dot-template">
				<section class="pic-section">
					<div class="square-div">
						<img class="good-img" src="{{=it}}">
					</div>
				</section>
			</script>
		</section>

		<section class="quickorder-section linear-section margin-bottom">
			<label for="demand">具体规格和要求：</label>
			<textarea id="demand" class="brief-textarea border-box demand" placeholder="请尽可能多的提供信息有助于供应商快速给您反馈。"></textarea>
		</section>

		<section class="quickorder-section linear-section margin-bottom padding-top padding-bottom">
			<label for="count">采购数量：</label>
			<input id="count" class="brief-textarea border-box count" type="text" placeholder="请填写数量(单位：米)" />
		</section>

		<section class="quickorder-section linear-section margin-bottom padding-top padding-bottom">
			<label for="connection">联系方式：</label>
			<input id="connection" class="connection" placeholder="请留下您的联系方式">
		</section>
	</article>

	<footer class="btn-footer footer-one-btn margin-bottom">
		<button class="makeorderBtn color-primary">立即发布</button>
	</footer>
</article>

<include file="mobile/Public/footer" />

<script>
//'jquery' or 'zepto' 脚本入口,按情况选择加载
seajs.use(['jquery','doT'], function () {
	$(document).ready(function () {
		seajs.use('plupload',function ()
		{
			var uploader_img = new plupload.Uploader({
				browse_button: 'uploadBtn',
				url:  "{:U('Core/File/uploadPicture',array('session_id'=>session_id()))}",
				init: {
					FilesAdded: function (up, files) {
						uploader_img.start();
					},
					FileUploaded: function (up, files, res) {
						res = JSON.parse(res.response); //PHP上传成功后返回的参数
						//console.log(res,res.data.file.path);
						if(res.status){
							var picTpl = doT.template($('#pic-tpl').text());
							$('#uploadBtn').after(picTpl(res.data.file.path))
						}else{
							alert(res.info)
						}
					},
					Error: function (upload,error) {
						alert('上传失败，未知错误:'+error.code)
						if(error.code==(-600)){
							alert('图片大小为0-1mb范围内')
						}else{
							alert('上传失败，未知错误:'+error.code)
						}
					}
				}
			});
			uploader_img.init();
		});

		$('.typeid ul').on('click','li',function(){
			$('li').removeClass('type-selected')
			$(this).toggleClass('type-selected');
		});

		$('.pic-content').on('click','.pic-section', function () {
			if(confirm('您想取消此图片吗？')){
				$(this).remove();
			}
		});

		$('.makeorderBtn').click(function () {
			var error = 0;
			var quickorder = '';
			var typeid = $(".type-selected").attr("data-type");
			var demand = $("#demand").val().trim();
			//console.log(demand);
			if(demand==''){
				alert('具体规格和要求不能为空');
				error = 1;
				return;
			}
			var count = $("#count").val().trim();
			if(!count){
				alert('采购数量必须填写');
				error = 1;
				return;
			}
			var connection = $("#connection").val().trim();
			var reg = /^0?1[3|4|5|7|8][0-9]\d{8}$/;
			if(!connection){
				alert('请填写您的联系方式');
				error = 1;
				return;
			}else if(!reg.test(connection)){
				alert('手机号错误，请检查输入的手机号');
				error = 1;
				return;
			}
			var images = [];
			$('.pic-section').each(function () {
				var src = $(this).find('.good-img').attr('src');
				images.push(src);
			});
			images = images.join(';');
			quickorder = {
				typeid:typeid,
				content:demand,
				quantity:count,
				connection:connection,
				images:images,
			}
			if(error) return;
			var data = {
				quickorder:quickorder,
			};
			console.log(data);
			$.post("{:U('shop/index/quick_order')}",data, function (ret) {
				// ret = JSON.parse(ret);
				//console.log(ret);
				if(ret.status==1){
					alert('发布成功');
					window.location.href="index.php?s=/shop/index/quick_order_list.html";
				}else{
					alert('发布失败，'+ret.info);
				}
			})
		})
	})
});
</script>
</body>
</html>